<template>
  <div style="overflow: hidden;">
    <div class="login" :style="{backgroundImage: 'url(' + bgUri + ')'}">
      <div style="height: 100%;">
        <div class="login-content">
          <div class="login-container">
            <div class="login-header">
              <div class="logo">
                <svg width="331" height="66" xmlns="http://www.w3.org/2000/svg">
                  <g>
                    <title>background</title>
                    <rect fill="#fff" id="canvas_background" height="68" width="333" y="-1" x="-1"/>
                  </g>
                  <g>
                    <title>Layer 1</title>
                    <text font-style="normal" stroke="#000" transform="matrix(2.767160950569061,0,0,3.8839330882096212,-168.5214690290023,-99.80581136198597) " xml:space="preserve" text-anchor="start" font-family="'Courier New', Courier, monospace" font-size="15" id="svg_1" y="38.21562" x="62.209773" stroke-width="0" fill="#0084ff">WINNERPROPHET</text>
                  </g>
                </svg>
              </div>
              <div class="login-intro">
                <span v-if="isLogin === false">登录</span>
                <span v-if="isLogin === true" >注册</span>
                WP,发现更大的精彩
              </div>
            </div>
            <router-view class="login-main"/>
            <div class="login-tab">
              <em v-if="isLogin === false" @click="isLogin = true">
                没有帐号？
                <router-link tag="span" :to="{name: 'register'}">注册</router-link>
              </em>
              <em v-else @click="isLogin = false">
                已有帐号？
                <router-link tag="span" :to="{name: 'login'}">登录</router-link>
              </em>
            </div>
          </div>
        </div>
        <div class="login-footer">
          <div class="login-links">
            <a href="##">GITHUB</a>
            <em> · </em>
            <a href="##">GOOGLE</a>
            <em> · </em>
            <a href="##">BAIDU</a>
            <em> · </em>
            <a href="##">CSDN</a>
          </div>
          <div class="login-right">
            &copy; 2018 WINNERPROPHET
          </div>
          <div class="login-report">
            <a href="###">联系方式：sinweng12138@163.com</a>
            <a href="###">联系方式：sinweng12138@163.com</a>
            <a href="###">联系方式：sinweng12138@163.com</a>
            <a href="###">联系方式：sinweng12138@163.com</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'account',
  data () {
    return {
      isLogin: false,
      bgUri: require('../../assets/bg.png')
    }
  }
}
</script>

<style scoped lang="less">
  .login{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-right: 15px;
    overflow: auto;
    .login-content{
      min-height: 671px;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      .login-container{
        width: 432px;
        margin: 0 auto;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(26,26,26,.1);
        overflow: auto;
        .login-tab{
          width: 100%;
          height: 59px;
          line-height: 59px;
          border-top: 1px solid #eee;
          background: #f6f6f6;
          text-align: center;
          font-size: 16px;
          color: #1a1a1a;
          font-family: "微软雅黑";
          span{
            color: #175199;
            cursor: pointer;
          }
        }
        .login-header{
          text-align: center;
          padding: 30px 0px 0px 5px;
          svg{
            fill: #0084ff;
          }
          .login-intro{
            font-size: 22px;
            color: #0084ff;
            margin: 15px 0px;
            span{
              margin-right: -6px;
            }
          }
        }
        .login-main{
          padding: 0 40px 36px;
        }
      }
    }
    .login-footer{
      text-align: center;
      color: #fff;
      line-height: 20px;
      a{
        line-height: 20px;
        color: #fff;
      }
    }
  }
</style>
